<template>
  <div class="herb-usage-popup-1">
    <div class="herb-usage-grid">
      <div class="herb-usage-item" v-for="(item, idx) in usages" :key="idx" @click="selectItem(item.value)">
        {{ item.text }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import store from '@/store';
const useBaseDataStores = store.useBaseDataStore();
const usages =useBaseDataStores.getEnumSelect('tcmSingleDosageEnum'); 
const emits = defineEmits(['selectItem']);
const selectedItems = ref<string[]>([]);

const selectItem = (item: string) => {
  if (selectedItems.value.includes(item)) {
    selectedItems.value = selectedItems.value.filter((i) => i !== item);
  } else {
    selectedItems.value.push(item);
  }
  emits('selectItem', item);
};
</script>

<style scoped>
.herb-usage-popup-1 {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  border: 1px solid #e4e7ed;
  padding: 8px;
    min-width: 300px;
    height: 200px;
    overflow: auto;
  z-index: 9999;
  display: inline-block;
}
.herb-usage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.herb-usage-item {
  text-align: center;
  font-size: 15px;
  color: #333;
  padding: 2px 0;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s;
  border-radius: 4px;
}
.herb-usage-item:hover {
  background: #f5f7fa;
  color: #18b3ab;
}
</style>
